:root {
    --blue: #2D2F55;
    --light-blue: #565876;
    --dark-blue: #16172a;
    --red: #ED3237;
    --light-red: #f05a5e;
    --dark-red: #76191b;
    --black: #333333;
    --white:#fff; 

    --theme-yellow:   #FEE715FF;
    --theme-black:    #101820FF;
    --theme-gray:       #8892B0;
}

*{
    font-family: "Poppins", sans-serif !important;
}

.bg-blue {
    background-color: var(--blue);
}

.text-blue {
    color: var(--blue) !important;
}

.btn-blue {
    background-color: var(--blue);
    color: #fff;
}

.bg-light-blue {
    background-color: var(--light-blue);
}

.text-light-blue {
    color: var(--light-blue);
}

.btn-light-blue {
    background-color: var(--light-blue);
    color: #fff;
}

.bg-dark-blue {
    background-color: var(--dark-blue);
}

.text-dark-blue {
    color: var(--dark-blue);
}

.btn-dark-blue {
    background-color: var(--dark-blue);
    color: #fff;
}

.bg-red {
    background-color: var(--red);
    font-family: "Poppins", sans-serif !important;

}

.btn-red {
    background-color: var(--red);
    color: #fff;
    font-family: "Poppins", sans-serif !important;
    transition: 0.3s ease-in-out;


}

.btn-red:hover{
    background-color: var(--blue) !important;
    color: var(--white);
    padding: 12px;
    transition: 0.3s ease-in-out;
}

.text-red {
    color: var(--red) !important;
}

.bg-light-red {
    background-color: var(--light-red);
}

.btn-light-red {
    background-color: var(--light-red);
    color: #fff;
}

.text-light-red {
    color: var(--light-red);
}

.bg-dark-red {
    background-color: var(--dark-red);
}

.btn-dark-red {
    background-color: var(--dark-red);
    color: #fff;
}

.text-dark-red {
    color: var(--dark-red);
}

.text-white {
    color: #fff !important;
}
.bg-black {
    background-color: var(--black);
}

.btn-arrow {
    transition: 0.3s ease-in-out; /* Apply transition to all properties */
}


.btn-arrow:hover{
    font-size: 18px;
    background-color: var(--red);
    transition: 0.3 ease-in-out;
    border-radius: 50%;
    
}
/*Generak*/
.wallpaper {
    background-image: url(../images/wallpaper.jpg) !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    min-height: 100% !important;
    padding: 5em !important;
    margin: 0 !important;
    width: 100% !important;
}

.hero-banner{
    height: 100vh;
    background-image: url(../images/wallpaper.jpg) !important;
    background-size: cover;
    background-position: center;
}

.breadcrumb-about{
    height: 30vh;
    background-image: url(../images/wallpaper.jpg) !important;
    background-size: cover;
    background-position: center;
}

.breadcrumb-construction{
    height: 30vh;
    background-image: url(../images/breadcrumb/construction.jpg) !important;
    background-size: cover;
    background-position: center;
}

.breadcrumb-security{
    height: 30vh;
    background-image: url(../images/breadcrumb/security.jpg) !important;
    background-size: cover;
    background-position: center;
}

.breadcrumb-it{
    height: 30vh;
    background-image: url(../images/breadcrumb/itc.jpg) !important;
    background-size: cover;
    background-position: center;
}

.breadcrumb-facilities{
    height: 30vh;
    background-image: url(../images/breadcrumb/facilities.jpeg) !important;
    background-size: cover;
    background-position: center;

}

.breadcrumb-farming{
    height: 30vh;
    background-image: url(../images/breadcrumb/farming.jpeg) !important;
    background-size: cover;
    background-position: center;

}

.breadcrumb-contactus{
    height: 30vh;
    background-image: url(../images/breadcrumb/contactus.jpeg) !important;
    background-size: cover;
    background-position: center;

}
}
body, html {
    margin: 0;
    padding: 0;


}
.rotate-90 {
    transform: rotate(-45deg);
}
/*Bootstrap*/
.navbar-nav .nav-link {
    color: var(--blue) !important;
    font-weight: 500;
    transition: 0.2s ease-in-out;

}
.navbar-nav .nav-link:hover {
    color: var(--red);
    font-weight: 600;
}
nav .nav-link {
    transition: border-bottom 0.3s ease-in-out;
}
nav .nav-link.active {
    color: var(--light-red) !important;
    font-weight: 500;
    border-bottom: 2px solid var(--light-red); /* Add this line */
    transition: 0.2s ease-in-out;


}

.bg-two-colors {
    position: relative;
    background: linear-gradient(to right, var(--red)50%, var(--blue) 50%);
}

.navbar-top {
    background: #4D5061;
    border-bottom: 4px solid #60B078;
    color: #FFF;
}
nav .nav-link {
    color: var(--light-blue) !important;
    font-weight: 500;
}

nav .nav-link:hover {
    color: var(--red) !important;
    font-weight: 500 !important;
    font-size: 16.5px;
    transition: 0.2s ease-in-out;
}

.border-bottom-2{
    border-bottom: 3px solid var(--light-red); /* Add this line */

}

.navbar-toggler {
    color: var(--red) !important;
    background-color: var(--red) !important;
}

h1, h2, h3, h4, h5, h6, .text-body-emphasis {
    color: var(--blue) !important;
}


.fw-8{
    font-weight: 700;
}

.fs-normal{
 font-size: 14px;
}

.fs-normal-2{
    font-size: 14px;
   }

.carousel-item img {
    height: 100%;
}

footer .list-group-item {
    border: 0;
}


.footer-list {
    list-style-type: none; /* Remove default list styles */
    padding-left: 0; /* Remove default left padding */
  }

  .footer-list li {
    padding-left: 20px; /* Add padding to the left of list items */
    position: relative; /* Set position to relative for pseudo-element */
    margin-bottom: 5px; /* Add some vertical spacing between list items */
  }

  .image-service {
    overflow: hidden; /* Ensure that the curve is visible */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), calc(100% - 90px) 100%, 0 100%); /* Define a polygon clip path */
    border-bottom: 5px solid var(--red);
}

.image-service-2 {
    overflow: hidden; /* Ensure that the curve is visible */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%); /* Define a polygon clip path */
    border-bottom: 5px solid var(--red);
}



  .footer-list li:before {
    content: ""; /* Create a pseudo-element */
    position: absolute; /* Position it absolutely relative to its parent li */
    left: 0; /* Position it on the left */
    top: 50%; /* Align it vertically in the middle */
    transform: translateY(-50%); /* Adjust vertical alignment */
    width: 10px; /* Set width of the square */
    height: 10px; /* Set height of the square */
    background-color: var(--red); /* Set color of the square */
  }

.small-hr {
    width: 8rem;
    margin: 1rem auto;
    border-top: 3px solid var(--red);
    opacity: 1;
}
/*Social icons*/
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px; /* Adjust size as needed */
    height: 80px; /* Adjust size as needed */
    border-radius: 50%;
    background-color: var(--red);
    transition: .2s ease-in-out;

}

.services-icon {
    font-size: 1.75em;
    color: white;

}

.card .icon-circle:hover {
    color: var(--red);
    width: 90px; /* Adjust size as needed */
    height: 90px; /* Adjust size as needed */
    transition: .2s ease-in-out;
    background-color: var(--blue);
    cursor: pointer;
    border: 2px solid var(--red);

}
.services-icon:hover {
    color: var(--red);

}

.card-body-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: white;
    text-align: center;
    /* padding: 1rem; */
}

.card-img-top{
    height: 100px;
    object-fit: cover;
}

.social-icon {
    font-size: 2em;
}

i.social-icon {
    color: var(--blue);
}


    i.social-icon:hover {
        color: var(--red);
    }
    @media (min-width: 992px) {
        /* .navbar-expand-lg .navbar-collapse {
            display: flex !important;
            flex-basis: min-content !important;
            padding-left: 130px !important;
        } */
    }



 /* SECTION VERTICAL TABS */
 #experienceTab.nav-pills .nav-link.active {
    color: var(--red) !important;
    background-color: transparent;
    border-radius: 0px;
    border-left: 3px solid var(--red);
}
#experienceTab.nav-pills .nav-link {
    border-radius: 0px;
    border-left: 2px solid var(--light-blue);
}
.date-range {
    letter-spacing: 0.01em;
    color: var(--light-blue);
}

/* STUB  LINKS */
a {
    color: var(--light-blue);
    transition: 0.3s ease-in-out;
}
a:hover {
    color: var(--red);
}

#experienceTab .nav-link {
    color: var(--light-blue) !important;

}